<script setup>
import { ref, defineProps } from 'vue'
import { userlogin } from '@/api/userAPI.js'
import { useUserStore } from '@/stores/user.js'
import router from '@/router/index.js'
const isactive = ref(1)
const userStore = useUserStore()
defineProps({
  isshow: {
    type: Number
  }
})
//设置表单
const fromModel = ref({
  account: '',
  password: '',
  isAgree: false
})
//设置表单验证规则，非空
const rules = ref({
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  isAgree: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请同意用户协议'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
})
const form = ref()
const onLogin = async () => {
  await form.value.validate()
  const res = await userlogin(fromModel.value)
  userStore.setToken(res.data.result.token)
  userStore.setNickname(res.data.result.nickname)
  router.push('/')
}
</script>
<template>
  <div v-show="isshow === 1">
    <div class="header">
      <span :class="{ active: isactive === 1 }" @click="isactive = 1"
        >登录</span
      >
      <span :class="{ active: isactive === 2 }" @click="isactive = 2"
        >注册</span
      >
    </div>
    <div class="body">
      <el-form :model="fromModel" :rules="rules" ref="form">
        <el-form-item prop="account">
          <el-input
            placeholder="请输入账号"
            style="height: 50px"
            v-model="fromModel.account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            style="height: 50px"
            type="password"
            show-password
            v-model="fromModel.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isAgree">
          <el-checkbox
            size="large"
            style="height: 20px"
            v-model="fromModel.isAgree"
          >
            已阅读并同意小兔鲜账号
            <router-link class="routerlink" to="#">用户协议</router-link> 和
            <router-link class="routerlink" to="#">隐私政策</router-link>
          </el-checkbox>
        </el-form-item>
      </el-form>
      <el-button class="elb" @click="onLogin">登录</el-button>
      <div class="footer">
        <router-link class="routerlink" to="#">忘记密码？</router-link>
        <router-link class="routerlink" to="#">手机号登陆</router-link>
      </div>
      <div class="other">
        <span>其他登录方式</span>
        <ul>
          <li style="background-color: blue">支</li>
          <li style="background-color: green">微</li>
          <li style="background-color: red">Q</li>
          <li style="background-color: orange">博</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="text" v-show="isshow === 2">
    <h3>用户协议</h3>
    欢迎您注册、使用小米账号！
    《小米账号使用协议》（如下简称“本协议”）系您与小米科技有限责任公司及其关联公司（如下简称“小米”或“我们”）就小米账号的注册和使用而订立的协议。
    在您使用小米账号的注册和使用服务（如下简称“本服务”）之前，我们在此特别提醒您，请您认真阅读、充分理解本协议各条款，特别是涉及服务费用条款，免除或者限制小米责任的条款，对您的权利限制条款，争议解决和法律适用条款等，此类条款将以加粗的形式提示您注意。
    您通过网络页面点击同意和/或注册和使用小米账号的行为，即视为您已阅读、理解并同意接受本协议，并同意接受本协议各项条款的约束。若您不同意本协议，则您有充分且完全的权利退出本服务。
    11.2 通知
    在注册小米账号时，您应该向小米提供真实有效的联系方式（包括您的电子邮件地址、手机号码等），对于联系方式发生变更的，您有义务及时更新有关信息，并保持可被联系的状态。小米将向您的上述联系方式的其中之一或其中若干送达各类通知，而此类通知的内容可能对您的权利义务产生重大的有利或不利影响，请您务必及时关注。您所提供的电子邮件地址或手机号码无法使用或者因任何原因我们无法将通知送达给您而产生的风险，由您自行承担。
    11.3 独立性
    如本协议中的任一条款被认定为或视为废止、无效、不可执行，其余条款仍具有法律效力，对双方均具有约束力。
    11.4 权利义务的转让
    未经我们事先书面许可，您不得转让或以其它方式转移您在本协议下的任何权利或义务。任何未受许可的转让或转移都将视为无效。出于业务升级或运营主体发生变化等情况，小米有权转让、分包或更替小米在本协议下的权利和义务。
  </div>
  <div class="text" v-show="isshow === 3">
    <h3>隐私协议</h3>
  </div>
  <div class="text" v-show="isshow === 4">
    <h3>帮助中心</h3>
  </div>
  <div class="text" v-show="isshow === 5">
    <h3>联系客服</h3>
  </div>
</template>
<style lang="scss" scoped>
.header {
  span {
    font-size: 25px;
    color: rgb(140, 143, 115);
    margin-right: 15px;
    cursor: pointer;
    padding-bottom: 3px;
  }
  .active {
    color: $xtxColor;
    border-bottom: 3px solid $xtxColor;
  }
}
.body {
  width: 100%;
  margin-top: 50px;
  .elb {
    color: white;
    font-size: large;
    background-color: $xtxColor;
    width: 100%;
    height: 50px;
    display: block;
    margin: 0 auto;
  }
  .routerlink {
    color: $xtxColor;
  }
}
.footer {
  margin-top: 8px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}
.other {
  margin-top: 20px;
  span {
    color: #606266;
    display: block;
    text-align: center;
  }
  ul {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    li {
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
}
.text {
  width: 100%;
  height: 100%;
  background-color: rgb(246, 245, 225);
  border-radius: 5%;
  overflow: auto;
  padding: 20px;
}
</style>
